<template>
    <div class="page-header">
        <el-button @click="onAdd" type="primary" size="small" icon="Plus">
            添加
        </el-button>
    </div>
    <div class="page-card">
        <el-table ref="multipleTable" :data="state.linkList" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
            <el-table-column label="封面">
                <template #default="scope">
                    <el-image style="width: 80px; height: 80px" :src="scope.row.img"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" :formatter="$utils.timeFormat" label="创建时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="open" label="跳转方式" show-overflow-tooltip>
                <template #default="scope">
                    <span>{{state.openDic[scope.row.open]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="管理" width="200">
                <template #default="scope">
                    <el-button @click="linkEdit(scope.row)" size="small">编辑</el-button>
                    <el-button type="danger" @click="linkDel(scope.row.id, scope.$index)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加轮播弹窗 -->
        <el-dialog :title="state.dialogTitle" v-model="state.dialogFormVisible" @close="closeDialog">
            <el-form :model="state.form" ref="formRef" label-width="80px">
                <el-form-item label="跳转方式">
                    <el-select v-model="state.form.open" placeholder="请选择跳转方式">
                        <el-option v-for="item in state.openOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="state.form.title"></el-input>
                </el-form-item>
                <el-form-item v-show="state.form.open == 2" label="appId">
                    <el-input v-model="state.form.appid"></el-input>
                </el-form-item>
                <el-form-item label="URL">
                    <el-input v-model="state.form.url"></el-input>
                </el-form-item>
                <el-form-item label="封面">
                    <AliyunUpload ref="AliyunUploadRef" :file="[{'url':state.form.img}]" :isAvatar="true">
                    </AliyunUpload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" :loading="state.btnLoading" @click="submit(formRef,AliyunUploadRef)">确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue"
import { ElMessage } from 'element-plus'
import http from "@/utils/request"
import { useMainStore } from '@/store';
import AliyunUpload from "../../components/q-aliyun-upload/q-aliyun-upload.vue";

const store = useMainStore();

const state = reactive({
    openOptions: [
        {
            value: 1,
            label: '应用内页面'
        },
        {
            value: 2,
            label: '第三方小程序'
        },
        {
            value: 3,
            label: 'H5页面'
        }
    ],
    openDic: {
        1: '应用内页面',
        2: '第三方小程序',
        3: 'H5页面'
    },
    action: http.domain + 'common/uploadFile',
    linkList: [],
    headers: {
        token: store.user.token
    },
    multipleSelection: [],
    btnLoading: false,
    dialogFormVisible: false,
    dialogTitle: '',
    form: {
        id: '',
        type: 1,
        title: '',
        url: '',
        img: '',
        open: '',
        appid: ''
    }
})

let formRef = ref(null)
let AliyunUploadRef = ref(null)

onMounted(function () {
    getLinkList()
})

function submit(formRef, AliyunUploadEl) {

    if (!state.form.open) {
        ElMessage.error("请选择跳转方式");
        return;
    }

    let fileList = AliyunUploadEl.state.fileList;
    state.form.img = fileList[0].url;

    state.btnLoading = true;

    http.post('/admin/link/save', state.form).then(res => {
        if (res.code === 200) {
            state.form.id = '';
            state.form.introduce = '';
            state.form.img = '';
            state.goodsClassName = '';
            ElMessage.success(res.msg);
            state.dialogFormVisible = false;

            getLinkList();

        }

        state.btnLoading = false;
    });
}

function linkDel(id, index) {
    state.btnLoading = true;
    http.post('/admin/link/del', {
        id: id
    }).then(res => {
        if (res.code == 200) {
            state.linkList.splice(index, 1);
            ElMessage.success(res.msg);
        }

        state.btnLoading = false;
    });
}

function uploadSuccess(e) {
    state.form.img = e.result.url;
}

function getLinkList() {
    http.post('/api/link/list', {
        type: state.form.type
    }).then(res => {
        state.linkList = res.result.data;
    });
}


function handleSelectionChange(val) {
    state.multipleSelection = val;
}

function linkEdit(data) {
    state.dialogFormVisible = true;
    state.form = data;
}

function closeDialog() {

}

function onAdd() {
    state.dialogFormVisible = true;

    state.form = {
        id: '',
        type: 1,
        title: '',
        url: '',
        img: '',
        open: '',
        appid: ''
    }
}
</script>

<style lang="scss" scoped="scoped">

</style>
